<template>
  <el-dialog :title="title" width="800px" :visible.sync="visible" destroy-on-close @close="closeCallback">
    <div class="card">
      <p class="title"><i class="fa fa-th-large fa-lg"></i>订单详情</p>
      <el-descriptions title="用户信息" label-width="100px" class="demo-ruleForm">
        <el-descriptions-item label="用户名">
          <el-tag size="small">{{orders.user.uaccount}}</el-tag>
        </el-descriptions-item>
        <el-descriptions-item label="电话">{{orders.user.utel}}</el-descriptions-item>
        <el-descriptions-item label="邮箱">{{orders.user.uemail}}</el-descriptions-item>
        <el-descriptions-item label="姓名">{{orders.user.uname}}</el-descriptions-item>
        <el-descriptions-item label="收货(人)">
          {{orders.receive.recprovince}} {{orders.receive.reccity}} {{orders.receive.recdistrict}} {{orders.receive.recstreet}}(
            <el-tag size="small" type="warning">
              {{orders.receive.recreceiver}}
            </el-tag>)
        </el-descriptions-item>
      </el-descriptions>
      <el-descriptions title="订单信息" label-width="100px" class="demo-ruleForm" :column="2">
        <el-descriptions-item label="订单编号">
          <el-tag size="small">{{orders.onum}}</el-tag>
        </el-descriptions-item>
        <el-descriptions-item label="下单时间"><i class="el-icon-time"></i>{{orders.ordertime | formatDate("yyyy-mm-dd h:mi:s")}}</el-descriptions-item>
        <el-descriptions-item label="总积分">{{orders.ointegral}}</el-descriptions-item>
        <el-descriptions-item label="总金额">{{orders.ototal | rounding}}</el-descriptions-item>
        <el-descriptions-item label="订单状态">
          <el-tag size="small" type="success">{{ostateValue}}</el-tag>
        </el-descriptions-item>
        <el-descriptions-item label="备注">{{orders.onote}}</el-descriptions-item>
      </el-descriptions>
      <el-descriptions title="商品信息" label-width="100px" class="demo-ruleForm"></el-descriptions>
      <el-table :data="orders.orderShoes" style="width: 100%">
        <el-table-column prop="shoes.sname" label="商品名称" width="180">
          <template slot-scope="scope">
          <div class="demo-image__preview">
            <el-image
              style="width: 100px; height: 100px"
              :src="[imgBaseUrl + scope.row.shoes.shoePhotos[0].spurl][0]"
              :preview-src-list="[imgBaseUrl + scope.row.shoes.shoePhotos[0].spurl]">
            </el-image>
            <div class="block">
              <span class="demonstration">{{scope.row.shoes.sname}}</span>
            </div>
          </div>
          </template>
        </el-table-column>
        <el-table-column prop="ossize" label="尺码" width="80"></el-table-column>
        <el-table-column prop="osnum" label="数量" width="80"></el-table-column>
        <el-table-column prop="shoes.sprices" label="单价(元)">
          <template slot-scope="scope">
            {{scope.row.shoes.sprices | rounding}}
          </template>
        </el-table-column>
        <el-table-column prop="count" label="小计(元)">
          <template slot-scope="scope">
            {{scope.row.count | rounding}}
          </template>
        </el-table-column>
      </el-table>
    </div>
  </el-dialog>
</template>

<script>
import baseConfig from "../../utils/constant/baseConfig"

export default {
  name: "orderInfo",
  props: {
    title: { type: String, default: "订单详情" },
    dialogVisible: { type: Boolean, default: false },
    orders: {}
  },
  data () {
    return {
      visible: this.dialogVisible,
      ostateCode: this.orders.ostate,
      ostateValue: "",
      imgBaseUrl: baseConfig.baseUrl + "image/"
    }
  },
  methods: {
    closeCallback () {
      this.$emit("successCallback")
    }
  },
  filters: {
    rounding (value) {
      return value.toFixed(2)
    },
    formatDate (date, pattern) {
      var dt = new Date(date)
      var y = dt.getFullYear()
      var m = (dt.getMonth() + 1).toString().padStart(2, "0")
      var d = dt.getDate().toString().padStart(2, "0")
      var h = dt.getHours().toString().padStart(2, "0")
      var mi = dt.getMinutes().toString().padStart(2, "0")
      var s = dt.getSeconds().toString().padStart(2, "0")
      if (pattern.toLowerCase() === "yyyy-mm-dd") {
        return `${y}-${m}-${d}`
      } else {
        return `${y}-${m}-${d} ${h}:${mi}:${s}`
      }
    }
  },
  mounted () {
    if (this.ostateCode === 0) {
      this.ostateValue = "未付款"
    } else if (this.ostateCode === 1) {
      this.ostateValue = "未发货"
    } else if (this.ostateCode === 2) {
      this.ostateValue = "已发货"
    } else if (this.ostateCode === 3) {
      this.ostateValue = "交易完成"
    } else if (this.ostateCode === 4) {
      this.ostateValue = "申请退货"
    } else if (this.ostateCode === 5) {
      this.ostateValue = "已退货"
    } else if (this.ostateCode === 6) {
      this.ostateValue = "已取消"
    }
    this.orders.orderShoes.forEach((element) => {
      element.count = element.shoes.sprices * element.osnum
    })
  }
}
</script>
<style scoped>
  .demo-ruleForm {
    width: 460px;
    padding-top: 25px;
  }
  .el-select {
    width: 100%;
  }
  .card {
    width: 560px;
    padding-bottom: 15px;
    margin: 0px auto;
  }
  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }
  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }
  .el-descriptions{
    width: 540px;
    margin: 10px;
    font-size: 12px;
  }
</style>
